
<script>
var cur = null;
var curI = -1;
var tar = null;
var tarI = -1;
export default {
  name: "HelloWorld",
  model: {
    prop: 'checked',
    event: 'change'
  },
  props:{
    checked:{
      type:Array,
      default:()=>[]
    }
  },
  data(){
    return {
      index:-1
    };
  },
  mounted() {
    // console.log(this)

  },
  methods: {
    allowDrop(ev) {
      ev.preventDefault();
    },
    drag(ev) {
      // console.log(ev);
      
      for(var i=0;i<ev.target.parentNode.children.length;i++){
        
        if(ev.target.parentNode.children[i]===ev.target){
          break;
        }
      }
      curI = i;
      cur = this;
      // console.log(this,i)
      // console.log(ev.target.parentNode.children)
      // ev.dataTransfer.setData("Text", );
    },

    drop(ev) {
      ev.preventDefault();
      // console.log(ev.target)
      // console.log(ev)
      // var data = ev.dataTransfer.getData("Text");
      // console.log(data);
       tar = this;
       var i=0
      if(cur==tar){
        if(ev.target == this.$refs['ww']){
           i = ev.target.children.length-1;
        }else{
            for(i=0;i<ev.target.parentNode.children.length;i++){
          // console.log(ev.target.parentNode,ev.target)
          if(ev.target.parentNode.children[i]===ev.target){
            break;
          }
        }
        }
        
        var data1 = cur.checked.splice(curI,1);
        // if(i>=ev.target.parentNode.children.length){
        //   i = ev.target.parentNode.children.length-1;
        //   cur.checked.push(...data1)
        // }else{
          cur.checked.splice(i,0,...data1)
        // }
        // var tem = cur.checked[i];
        // cur.checked[i] = cur.checked[curI];
        // cur.checked[curI] = tem;
        console.log(i,data1)


        return;
      }
      var data = cur.checked.splice(curI,1);
      tar.checked.push(...data)
      console.log(tarI,curI)
      console.log(cur,tar)

      // ev.target.appendChild(document.getElementById(data));
    },
    
  },
  render() {
    // console.log(this.$slots)
    return (
      <div
      class='ww'
      ref='ww'
      onDrop={($event)=>{this.drop($event)}}
      onDragover={($event)=>{this.allowDrop($event)}}
    >
    {(this.$slots.default||[]).map(slot=>{
      // console.log(slot)
      if(!slot.data.attrs){
        slot.data.attrs = {};
      }
      if(!slot.data.on){
        slot.data.on = {};
      }
      slot.data.on.dragstart = (e)=>{
        this.drag(e)
      }
      slot.data.attrs.draggable=true;
      return slot;
    })}
  </div>
    )
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.ww {
  height: 500px;
  margin-top: 50px;
  background-color: palegoldenrod;
}
</style>
